<template>
  <n-grid :cols="7" item-responsive>
    <n-grid-item :span="1">
      <div>
        <n-menu :options="options" style="width: 180px" default-value="1" @update:value="handleMenu" />
      </div>
    </n-grid-item>
    <n-grid-item :span="6">
      <div class="space-right">
        <div v-if="showSpaceData[0]" v-for="item in showSpaceData" :key="item.space_id" class="space_box" @click="checkSpace(item.space_id)">
          <div class="item_image">
            <n-image width="120" :src="'/api/' + item.space_image" />
          </div>
          <div class="item_text">
            <div style="font-size: 20px;font-weight: 700;">{{ item.space_name }}</div>
            <div style="color: gray;margin-top: 5px;font-size: 13px;">{{ item.username
            }}创建，已运营{{ item.create_day }}天，{{ item.space_people }}加入</div>
            <div style="margin-top: 10px;">
              <n-ellipsis :line-clamp="2" :tooltip="false">
                {{ item.space_description }}
              </n-ellipsis>
            </div>
          </div>
        </div>
        <n-empty v-else-if="currentKey=='1'" description="还没有属于自己的空间" style="height: 265px;justify-content: center;">
          <template #extra>
            <n-button size="small" @click="router.push('/createSpace')">
              创建空间
            </n-button>
          </template>
        </n-empty>
        <n-empty v-else description="还没有加入空间" style="height: 265px;justify-content: center;">
          <template #extra>
            <n-button size="small" @click="router.push('/showSpace')">
              寻找空间
            </n-button>
          </template>
        </n-empty>
      </div>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang='ts'>
import type { MenuOption } from 'naive-ui'
import { ref, onMounted, Ref } from 'vue';
import { spaceDateType } from "../../types/index"
import { useRouter } from 'vue-router';
const router = useRouter()

const options: MenuOption[] = [
  {
    label: "创建的空间",
    key: '1'
  },
  {
    label: "加入的空间",
    key: '2'
  }
]
const showSpaceData: Ref<Array<spaceDateType>> = ref([])
const currentKey = ref('1')

const props = defineProps<{
  spaceData: userSpaceData
}>()

type userSpaceData = {
  join_space: spaceDateType[],
  create_space: spaceDateType[]
}

const handleMenu = (key: string) => {
  if (key === '1') {
    showSpaceData.value = props.spaceData.create_space as any
  } else {
    showSpaceData.value = props.spaceData.join_space as any
  }
  currentKey.value = key
}

const checkSpace = (space_id: number) => {
  router.push("/checkSpace/" + space_id)
}

onMounted(() => {
  showSpaceData.value = props.spaceData.create_space as any
})

</script>

<style lang='scss' scoped>
.space-right {
  border-left: 1px solid var(--bs-divider-color);
  padding: 20px;
  box-sizing: border-box;

  .space_box {
    width: 800px;
    height: 120px;
    padding: 20px;
    // border-top: 1px solid rgba(92, 199, 199, 0.7);
    cursor: pointer;
    display: flex;

    .item_image {
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
    }

    .item_text {
      width: 640px;
      margin-left: 30px;
    }
  }

  .space_box:hover {
    box-shadow: 0 2px 12px 0 #63e2b7;
  }
}
</style>